<template>
  <div id="main">
    <el-form
      class="form"
      :model="RegForm"
      :rules="RegFormRulest"
      ref="RegFormRef"
    >
      <div class="form-head">
        <h2>新用户注册</h2>
        <p class="form-notice">欢迎新用户！你的加入帮助了更多的人。</p>
        <p>
          已有账号？
          <router-link active-class="active" to="/pagelogin/glogin">
            立即登入
          </router-link>
        </p>
      </div>
      <div class="form-body">
        <!-- 用户名 -->
        <el-form-item label="" prop="Username">
          <div class="ui-input">
            <el-input
              placeholder="用户名"
              v-model="RegForm.Username"
              ref="iptUserName"
            ></el-input>
          </div>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item label="" prop="Password">
          <div class="ui-input">
            <el-input
              type="password"
              placeholder="密码，3-15位，区分大小写"
              v-model="RegForm.Password"
              show-password
            ></el-input>
          </div>
        </el-form-item>
        <!-- 真实姓名 -->
        <el-form-item label="" prop="Realname">
          <div class="ui-input">
            <el-input
              type="text"
              placeholder="真实姓名"
              v-model="RegForm.Realname"
            ></el-input>
          </div>
        </el-form-item>
        <!-- 手机号 -->
        <el-form-item label="" prop="Phone">
          <div class="ui-input">
            <el-input
              type="text"
              placeholder="手机号"
              v-model="RegForm.Phone"
            ></el-input>
          </div>
        </el-form-item>

        <button class="ui-button ui-button--primary" @click="regBtn">
          注册
        </button>
      </div>
    </el-form>
  </div>
</template>

<script>
import "../css/style.css";
export default {
  name: "Gregister",
  data() {
    var checkPhone = (rule, value, callback) => {
      // 验证邮箱的正则表达式
      const regPhone =
        /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
      if (regPhone.test(value)) {
        //合法的邮箱
        return callback();
      }
      callback(new Error("请输入合法的电话"));
    };
    return {
      // 注册表单的数据绑定
      RegForm: {
        Username: "",
        Password: "",
        Realname: "",
        Phone: "",
      },
      // 表单的验证规则
      RegFormRulest: {
        Username: [
          { required: true, message: "*请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        Password: [
          { required: true, message: "*请输入密码", trigger: "blur" },
          {
            min: 3,
            max: 15,
            message: "长度在 3 到 15 个字符",
            trigger: "blur",
          },
        ],
        Realname: [
          { required: true, message: "*请输入真实姓名", trigger: "blur" },
        ],
        Phone: [
          { required: true, message: "*请输入手机号", trigger: "blur" },
          { validator: checkPhone, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 注册用户按钮
    async regBtn($event) {
      // 阻止表单默认提交
      $event.preventDefault();
      // 通知vuex发送axios请求
      await this.$store.dispatch(
        "usermanage/regUsers",
        JSON.stringify(this.RegForm)
      );
      // 获取axios数据
      let resObj = this.$store.state.usermanage.regUserMsg;
      // 判断用户名是否存在
      if (resObj.affectedRows) {
        this.$message.success("注册成功！");
        this.$router.push({
          path: "/pagelogin/glogin",
          query: {
            username: this.RegForm.Username,
            password: this.RegForm.Password,
          },
        });
      } else {
        this.$message.error("注册失败，用户名重复！");
        this.$nextTick(function () {
          this.$refs.iptUserName.focus();
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.form {
  margin-top: 60px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 5px;
}
.ui-input {
  padding: 0;
}
</style>
